<template>
  <div class="animated fadeIn">
    <!-- 运单动态 2018/3/6 11:28 zhangQ -->
    <Row>
      <i-col :md="24">
        <div>
          <div id="container" style="margin-bottom:10px;">
          </div>

          <div style="position:relative;">
            <Table :columns="columns7" :data="main_order_list" ref="table"></Table>
            <div style="position:absolute;top:0px;width:100%;height:100%;display: flex;
                                      align-items: center;
                                      justify-content: center;background: rgba(210, 216, 222, 0.5);"
                 v-if="list_loadding">
              <Spin size="large"></Spin>
              <h6 style="color:#2d8cf0;margin-top:10px;">正在获取数据...</h6>
            </div>
          </div>
          <Page :total="this.pageTotal" show-total @on-change="setInitPage"
                style="text-align:right;margin-top:50px"></Page>
          <!--
          <Button type="primary" size="large" @click="exportData(1)">
            <Icon type="ios-download-outline"></Icon>
            导出原始数据
          </Button>
          <Button type="primary" size="large" @click="exportData(2)">
            <Icon type="ios-download-outline"></Icon>
            导出排序和过滤后的数据
          </Button>
        -->
        </div>
      </i-col>
    </Row>

    <!--
    <Modal v-model="radarModel" title="订车详情">
      <Row>
        <i-col :span="24">
        <chart :options="orderTrainOptions" class="echarts"></chart>
        </i-col>
      </Row>
    </Modal>

  -->

  </div>
</template>
<script>
  import { getFreightList } from '@api/backEnd/orderTrain'

  export default {
    name: 'freightDynamics',
    data () {
      return {
        radarModel: false,
        progresshow: false,
        progresscount: 0,
        progresstatus: 'active',
        progressspeed: 0,
        video_list: [],
        pageindex: 1,
        pageTotal: null,
        main_order_list: [],
        detailData: [],
        lodding: false,
        list_loadding: false,
        columns7: [
          {
            title: '请求车数',
            key: 'qqds',
            ellipsis: 'false',
            width: '120',
            render: (h, params) => {
              let qqds = params.row.qqds
              return h('Poptip', {
                props: {
                  content: qqds,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, qqds)
            }
          }, {
            title: '批准车数',
            ellipsis: 'false',
            key: 'pzds',
            width: '120',
            render: (h, params) => {
              let pzds = params.row.pzds
              return h('Poptip', {
                props: {
                  content: pzds,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, pzds)
            }
          }, {
            title: '发站',
            ellipsis: 'false',
            key: 'fzhzzm',
            width: '120',
            render: (h, params) => {
              let fzhzzm = params.row.fzhzzm
              return h('Poptip', {
                props: {
                  content: fzhzzm,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, fzhzzm)
            }
          }, {
            title: '发货单位名称',
            ellipsis: 'false',
            key: 'fhdwmc',
            render: (h, params) => {
              let fhdwmc = params.row.fhdwmc
              return h('Poptip', {
                props: {
                  content: fhdwmc,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, fhdwmc)
            }
          }, {
            title: '收货单位名称',
            ellipsis: 'false',
            key: 'shdwmc',
            render: (h, params) => {
              let shdwmc = params.row.shdwmc
              return h('Poptip', {
                props: {
                  content: shdwmc,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, shdwmc)
            }
          }, {
            title: '货物品名',
            ellipsis: 'false',
            key: 'hzpm',
            width: '120',
            render: (h, params) => {
              let hzpm = params.row.hzpm
              return h('Poptip', {
                props: {
                  content: hzpm,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, hzpm)
            }
          }, {
            title: '货物品类',
            ellipsis: 'false',
            key: 'hzpl',
            width: '120',
            render: (h, params) => {
              let hzpl = params.row.hzpl
              return h('Poptip', {
                props: {
                  content: hzpl,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, hzpl)
            }
          }, {
            title: '运单号',
            ellipsis: 'false',
            key: 'ddh',
            render: (h, params) => {
              let ddh = params.row.ddh
              return h('Poptip', {
                props: {
                  content: ddh,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, ddh)
            }
          }, {
            title: '时间',
            ellipsis: 'false',
            key: 'rksj',
            render: (h, params) => {
              let rksj = params.row.rksj
              return h('Poptip', {
                props: {
                  content: rksj,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, rksj)
            }
          }
        ],
        column1: [
          {
            title: '联运单号',
            ellipsis: 'false',
            key: 'mainOrderNo',
            render: (h, params) => {
              let mainOrderNo = params.row.mainOrderNo
              return h('Poptip', {
                props: {
                  content: mainOrderNo,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, mainOrderNo)
            }
          }, {
            title: '联运子单号',
            ellipsis: 'false',
            key: 'orderNo',
            render: (h, params) => {
              let orderNo = params.row.orderNo
              return h('Poptip', {
                props: {
                  content: orderNo,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, orderNo)
            }
          }, {
            title: '车号',
            ellipsis: 'false',
            key: 'trainNumber',
            render: (h, params) => {
              let trainNumber = params.row.trainNumber
              return h('Poptip', {
                props: {
                  content: trainNumber,
                  placement: 'top',
                  trigger: 'hover'
                }
              }, trainNumber)
            }
          }
        ]
      }
    },
    computed: {},
    methods: {
      remove (index) {
        this.video_list.splice(index, 1)
      },
      //      qiniu_upload () {
      //        uploader.start();
      //      },
      setInitPage (page) {
        const param = { page }
        getFreightList(param).then(res => {
          if (res.data.isSuccess === 1) {
            console.log(res.data + ' --- init page')
            this.main_order_list = res.data.data.list
            this.pageTotal = res.data.data.total
          }
        })
        this.pageindex = page
      },
      exportData (type) {
        if (type === 1) {
          this.$refs.table.exportCsv({
            filename: '原始数据',
            columns: this.columns7,
            data: this.video_list
          })
        } else if (type === 2) {
          this.$refs.table.exportCsv({
            filename: '排序和过滤后的数据',
            original: false
          })
        }
      }
    },
    mounted () {
      const vue = this
      this.list_loadding = true
      setTimeout(function () {
        vue.list_loadding = false
      }, 2000)
      this.setInitPage(1)
    },
    components: {}
  }
</script>
<style scoped>

</style>
